<template>
  <el-card class="rank-list-card" body-style="padding:0;">
    <template #header>
      <div class="title color3">
        <icon-font icon-class="afl-liebiao"></icon-font>
        {{ $t('mes.feedingPrioty') }}
      </div>
    </template>
    <template #default>
      <div style="height: 450px">
        <el-empty :image-size="40" v-if="rankList.length == 0" :description="$t('mes.restocking')"></el-empty>
        <div class="rank-list" v-else>
          <div class="list-item">
            <div class="" style="  flex: 0 0 20px;"></div>
            <div class="list-item-filed text-center table-title" style="  flex: 0 0 25%;">{{
                $t('mes.materialNumber')
              }}
            </div>
            <div class="list-item-filed text-center table-title" style="  flex: 0 0 20%;">{{
                $t('mes.loadingQuantity')
              }}
            </div>
            <div class="list-item-filed text-center table-title" style="  flex: 0 0 15%;">{{
                $t('mes.salesOrders')
              }}
            </div>
            <div class="list-item-filed text-center table-title" style="  flex: 0 0 16%;">
              {{ $t('wms.salesQuantity') }}
            </div>
            <div class="list-item-filed text-center table-title" style="  flex: 0 0 24%;">
              {{ $t('mes.dateOfDelivery') }}
            </div>
          </div>
          <div class="list-item" v-for="(item, index) in rankList" :key="index">
            <div class="list-item-no " :style="{backgroundColor:rankBgColor[index]}">{{ index + 1 }}</div>
            <div class="list-item-filed text-import" style="  flex: 0 0 25%;">
              {{ item.lvtCode }}
            </div>
            <div class="list-item-filed" style="flex: 0 0 20%;display: flex">
              <el-tag size="small" type="">{{ item.lvtQty + ' pcs ' }}/ {{
                  (item.lvtQty / 210).toFixed(1) + ' tray'
                }}
              </el-tag>
            </div>
            <div class="list-item-filed" style="flex: 0 0 15%;word-break: break-word">{{ item.soCode + '-' + item.soLine }}</div>
            <div class="list-item-filed" style="flex: 0 0 16%;">{{ item.salesQty + '' + item.unit }}</div>
            <div class="list-item-filed" style="flex: 0 0 24%;">{{ this.toTime(item.deliveryDate) }}</div>
          </div>
        </div>
      </div>
    </template>
  </el-card>
</template>

<script>
import IconFont from '@/components/IconFont/iconFont'
import { timestampDataTime } from '@/utils/DateUtils'

export default {
  name: 'lvtFeedingRangeList',
  components: { IconFont },
  props: {
    rankList: {
      type: Array,
      default () {
        return [{
          lvtCode: 'xxxxx',
          lvtQty: 200,
          soCode: 'XSDD50022000027',
          soLine: '1',
          salesQty: '300 pice',
          unit: 'xx',
          deliveryDate: '123456'
        }, {
          lvtCode: 'xxxxx',
          lvtQty: 200,
          soCode: 'XSDD50022000027',
          soLine: '1',
          unit: 'xx',
          salesQty: '300 pice',
          deliveryDate: '123456'
        }, {
          lvtCode: 'xxxxx',
          lvtQty: 200,
          soCode: 'XSDD50022000027',
          salesQty: '300 pice',
          unit: 'xx',
          soLine: '1',
          deliveryDate: '123456'
        }, {
          lvtCode: 'xxxxx',
          lvtQty: 200,
          soCode: 'XSDD50022000027',
          soLine: '1',
          salesQty: '300',
          unit: 'xx',
          deliveryDate: '123456'
        }]
      }
    }
  },
  data: () => {
    return {
      rankBgColor: ['#409EFF', '#66B1FF', '#79BBFF', '']
    }
  },
  methods: {
    toTime: (timeStamp) => {
      if (timeStamp) {
        return timestampDataTime(timeStamp)
      } else {
        return timeStamp
      }
    }
  }
}
</script>

<style scoped lang="scss">
.text-center {
  text-align: center;
}

.text-import{
  font-size: 26px;
  font-weight: bolder;
  text-shadow: 1px 1px 0 #0f0667;
}
.table-title {
  color: #909399;
  font-weight: bold;
  font-size: 14px;
}

.rank-list-card {
  .title {
    font-size: 16px;
    padding: 10px 0 0 20px;
    font-weight: bold
  }

  .rank-list {
    padding: 5px 10px 10px 20px;

    .list-item {
      display: flex;
      flex-direction: row;
      text-align: center;
      border-bottom: 2px dashed #eee;
      line-height: 40px;
      color: #909399;
      align-items: center;

      .list-item-no {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        font-size: 14px;
        line-height: 20px;
        border-radius: 15%;
        background: #909399;
        color: #fff;
      }

      &:nth-child(1) {
        color: #303133;
      }

      &:nth-child(2) {
        color: #606266;
      }

      &:nth-child(3) {
        color: #909399;
      }

      &:nth-child(4) {
        color: #909399;

        .list-item-no {
          background: #C0C4CC;
        }
      }
    }
  }
}
</style>
